<template>
  <div class="my_set">
    <van-nav-bar
        :title="$t('set')"
        left-arrow
        @click-left="$router.go(-1)"
    />
    <div class="content_list padding">
      <!--     问题反馈 -->
      <div class="content_item" v-if="isLogin" @click="$router.push('/feedBack')">
        <div>
          <img class="image" src="../../../assets/icon_problem.png">
          <span class="text">{{ $t('problem_feedback') }}</span>
        </div>
        <div class="select_right">
          <van-icon name="arrow" color="#9D9D9D"/>
        </div>
      </div>
      <!--    &lt;!&ndash;     修改密码 &ndash;&gt;-->
      <!--    <div class="content_item">-->
      <!--      <div>-->
      <!--        <img class="image" src="../../../assets/icon_update_pwd.png">-->
      <!--        <span class="text">{{ $t('pwd_update') }}</span>-->
      <!--      </div>-->
      <!--      <div class="select_right">-->
      <!--        <van-icon name="arrow" color="#9D9D9D"/>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--     关于我们 -->
      <div class="content_item" @click="$router.push('/aboutUs')">
        <div>
          <img class="image" src="../../../assets/icon_about.png">
          <span class="text">{{ $t('about_us') }}</span>
        </div>
        <div class="select_right">
          <van-icon name="arrow" color="#9D9D9D"/>
        </div>
      </div>
      <!--     退出账户 -->
      <div class="content_item"  v-if="isLogin" @click="onLoginOut()">
        <div>
          <img class="image" src="../../../assets/icon_exit.png">
          <span class="text">{{ $t('exit_account') }}</span>
        </div>
        <div class="select_right">
          <van-icon name="arrow" color="#9D9D9D"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {loginOut} from "@/api/my";
import router from "@/router";
import {Dialog, Toast} from 'vant'
import {useI18n} from 'vue-i18n'
import {ref} from "vue";
import {useStore} from "vuex";

export default {
  setup() {
    const {tm} = useI18n()
    const store = useStore()
    const isLogin = ref(localStorage.getItem('userId'))
    const onLoginOut = async () => {
      Dialog.confirm({
        title: tm('exit_current_account'),
        message: tm('hint_exit_account'),
      }).then(async () => {
        const res = await loginOut()
        if (res.code === 1) {
          const indexArr = ['phone', 'userId', 'loanInfo', 'token', 'userWriteInfo','userInfoVerify','orderId']
          indexArr.forEach(item => {
            localStorage.removeItem(item)
          })
          Toast({
            message: tm('exit_login_success')
          })
          router.push('/home/index')
        }
      }).catch(() => {
      });
    }
    // 清除loading
    store.dispatch('changeLoading', false)
    return {
      isLogin,
      onLoginOut
    }
  }
}
</script>

<style scoped lang="less">
.my_set {
  background-color: #f2f3f5;
  overflow: auto;

  .van-picker__confirm {
    color: #FF5252 !important;
  }

  ::v-deep .van-nav-bar {
    background: linear-gradient(90deg, #FF5252, #FF8244) !important;
    z-index: 1999;
  }

  ::v-deep .van-nav-bar .van-icon {
    color: #333333 !important;
  }

  .content_list {
    padding: 10px;

    .content_item {
      height: 40px;
      border-bottom: solid 1px #f2f3f5;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;

      div {
        height: 100%;
        display: flex;
        align-items: center;

        .image {
          height: 16px;
          width: 16px;
          margin-right: 10px;
        }

        .text {
          font-size: 12px;
          line-height: 40px;
          font-weight: 600;
        }
      }

      .select_right_text {
        color: #9D9D9D;
        font-size: 12px;
        margin-right: 5px;
      }

      .select_right {
        margin-right: 5px;
        color: #333333;
        font-size: 12px;
        flex: 1;
        justify-content: flex-end;
      }

      .input {
        width: 100px;
        border: none;
        height: 25px;
        font-size: 12px;
        text-align: right;
      }
    }
  }
}

</style>
